<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table.gridtable {
            text-align: center;
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
create sudoku
<button id="btn_create_sudoku" onclick="onCreateSudoku()">创建数独</button>
<button id="btn_create_excel" onclick="onCreateExcel()">创建Excel</button>
<table
        class="gridtable" id="sudokuTable">

</table>

</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {

    })

    function onCreateSudoku() {
        const table = document.getElementById("sudokuTable")
        while(table.hasChildNodes()) {
            table.removeChild(table.lastChild)
        }
        $.ajax({
            async: "true",
            type: "post",
            // data: JSON.stringify({"code": videoId}),
            // contentType: "application/json; charset=utf-8",
            url: window.document.location.pathname + "/sudoku/create/",
            success: function (result) {
                createSudokuTable(result)
            }
        })
    }

    function createSudokuTable(array) {
        const table = document.getElementById("sudokuTable")
        for (let i = 0; i< array.length; i++) {
            let row = document.createElement('tr')

            for (let j =0; j< array[i].length;j++) {
                let td = document.createElement('td')
                td.style.width = "50px"
                td.style.height = "50px"
                if (array[i][j] === "0" || array[i][j] === 0) {
                    td.innerHTML = "  "
                } else {
                    td.innerHTML = array[i][j]
                }
                row.appendChild(td)
            }
            table.appendChild(row)
        }
    }

    function onCreateExcel() {

        var aLink = document.createElement('a');
        aLink.download = "sudoku.xlsx";
        aLink.href = window.document.location.pathname + "/sudoku/excel/";
        document.body.appendChild(aLink);
        aLink.click();
        document.body.removeChild(aLink);
    }
</script>

</html>
